<template>
  <div class="main">
    <div class="header">
      <div>
        <i class="iconfont icon-back"></i>
      </div>
      <div>
        <input type="text" placeholder="喜马拉雅五千米">
      </div>
      <div>
        <i class="iconfont icon-gengduo"></i>
      </div>
    </div>
    <div class="content">
      <div class="sort">
        <div>综合排序
          <i class="iconfont icon-moreunfold"></i>
        </div>
        <div>销量优先
          <i class="iconfont icon-viewgallery"></i>
        </div>
        <div>热门商品
          <i class="iconfont icon-good"></i>
        </div>
        <div>高级筛选
          <i class="iconfont icon-filter"></i>
        </div>
      </div>
      <ul class="list clear">
        <li class="item" v-for="item in ProList" :key="item.id">
         <router-link to="pro_details">
            <img :src="item.imgSrc" alt="商品">
            <h3 class="pro-name clear">
            <span>{{item.brand}}</span>{{item.title}}</h3>
         </router-link>
          <h3 class="pro-origin clear">
            <span>{{item.discount}}</span>{{item.address}}</h3>
          <h3 class="pro-price clear">
            <span class="price">￥{{item.price}}</span>
            <span class="people">{{item.people}}</span>
            <i class="iconfont icon-add"></i>
          </h3>
        </li>
      </ul>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "../template/footer";
export default {
  name: "proListComponent",
  components: {
    Footer
  },
  data() {
    return {
      ProList:[
        {
          id:1,
          imgSrc:require('../image/t5b5m7n2qz6s6uaopdm6mlst7hi2v9.jpg'),
          brand:'Rominz',
          title:'诺曼姿亮泽雪肤乳',
          discount:'每满200减20元',
          address:'北京',
          price:108,
          people:'999人付款'
        },
        {
          id:2,
          imgSrc:require('../image/t5b5m7n2qz6s6uaopdm6mlst7hi2v9.jpg'),
          brand:'Rominz',
          title:'诺曼姿亮泽雪肤乳2',
          discount:'每满200减20元',
          address:'北京',
          price:108,
          people:'999人付款'
        },
        {
          id:3,
          imgSrc:require('../image/t5b5m7n2qz6s6uaopdm6mlst7hi2v9.jpg'),
          brand:'Rominz',
          title:'诺曼姿亮泽雪肤乳3',
          discount:'每满200减20元',
          address:'北京',
          price:108,
          people:'999人付款'
        },
        {
          id:4,
          imgSrc:require('../image/t5b5m7n2qz6s6uaopdm6mlst7hi2v9.jpg'),
          brand:'Rominz',
          title:'诺曼姿亮泽雪肤乳4',
          discount:'每满200减20元',
          address:'北京',
          price:108,
          people:'999人付款'
        },
        {
          id:5,
          imgSrc:require('../image/t5b5m7n2qz6s6uaopdm6mlst7hi2v9.jpg'),
          brand:'Rominz',
          title:'诺曼姿亮泽雪肤乳5',
          discount:'每满200减20元',
          address:'北京',
          price:108,
          people:'999人付款'
        },
        {
          id:6,
          imgSrc:require('../image/t5b5m7n2qz6s6uaopdm6mlst7hi2v9.jpg'),
          brand:'Rominz',
          title:'诺曼姿亮泽雪肤乳6',
          discount:'每满200减20元',
          address:'北京',
          price:108,
          people:'999人付款'
        }
      ]
    }
  },
};
</script>

<style scoped lang="less">
a{
  color: #444444;
}
.main {
  color: #ffffff;
}
.header {
  display: flex;
  height: 80px;
  background-color: #6a7531;
  div {
    width: 33.33%;
    height: 80px;
    line-height: 80px;
    font-size: 36px;
    input {
      display: block;
      width: 100%;
      height: 56px;
      line-height: 56px;
      border: 0;
      outline: none;
      color: #999999;
      padding: 0 7px;
      font-size: 24px;
      box-sizing: border-box;
      border-radius: 15px;
      margin: 12px auto;
    }
    i {
      font-size: 52px;
    }
  }
  div:first-child {
    text-align: left;
    i {
      margin-left: 15px;
    }
  }
  div:last-child {
    text-align: right;
    i {
      margin-right: 15px;
    }
  }
}
.content {
  margin-bottom: 99px;
  .sort {
    display: flex;
    height: 80px;
    color: #333333;
    text-align: center;
    border-bottom: #d9d9d9 1px solid; /*no*/
    div {
      width: 25%;
      line-height: 80px;
      font-size: 30px;
      i {
        margin-left: 10px;
        font-size: 30px;
      }
    }
    div:hover {
      color: #ff1200;
    }
  }
  .list {
    list-style: none;
    .item {
      width: 50%;
      height: 452px;
      background-color: #f4f4f4;
      float: left;
      margin-top: 38px;
      box-sizing: border-box;
      color: #333333;
      img {
        display: block;
        width: 100%;
        height: 321px;
      }
      h3 {
        padding: 0 15px;
        margin-top: 10px;
      }
      .pro-name {
        height: 35px;
        line-height: 35px;
        text-align: right;
        font-size: 24px;
        span {
          float: left;
          width: 88px;
          height: 35px;
          font-size: 22px;
          line-height: 35px;
          background-color: #6a7531;
          color: #ffffff;
          text-align: center;
        }
      }
      .pro-origin {
        height: 30px;
        line-height: 30px;
        font-size: 22px;
        text-align: right;
        color: #999999;
        span {
          float: left;
          width: 200px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          font-size: 22px;
          color: #e21c11;
          border-radius: 15px;
          box-sizing: border-box;
          border: #e21c11 1px solid;
        }
      }
      .pro-price {
        height: 27px;
        line-height: 27px;
        .price {
          float: left;
          font-size: 30px;
          color: #e21c11;
          margin-right: 30px;
        }
        .people {
          font-size: 22px;
          float: left;
          color: #999999;
        }
        i {
          float: right;
          font-size: 12px;
          width: 24px;
          height: 24px;
          line-height: 24px;
          border: #999999 1px solid;
          color: #999999;
          border-radius: 50%;
          text-align: center;
        }
      }
    }
    .item:nth-child(odd) {
      border-right: #ffffff 8px solid;
    }
    .item:nth-child(even) {
      border-left: #ffffff 8px solid;
    }
  }
}
</style>